<template>
  <div class="editor-playground">
    <div
      class="editor-page"
      :style="pageStyle"
      style="
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(42, 63, 84, 0.3);
      "
    >
      <vue-draggable-resizable
        v-for="(item, index) of doms"
        :key="item.type + index"
        :resizable="false"
        :snap="true"
        :snap-tolerance="20"
        :x="item.left"
        :y="item.top"
        :w="item.width"
        :h="item.height"
        :class-name="`my-class${index === root.domIndex ? ' active-dom' : ''}`"
        @refLineParams="getRefLineParams"
        @dragging="onDrag"
        @mousedown.native.stop="root.setDomIndex(index)"
        @click.stop
        @dragstop="onDragstop"
        @dblclick.native="handleDomDbclick"
      >
        <div class="editor-div" :style="divStyle(item)" @click.stop.prevent>
          <div style="z-index: 999; text-align: center">
            <div>
              {{ item.sort }}
            </div>
            <div v-if="item.id">
              {{ item.id }}
            </div>
          </div>
          <img
            v-if="item.link_image"
            :src="baseUrl + item.link_image"
            class="editor-item"
            :style="{ 'z-index': item.index }"
          />
          <img
            v-if="item.focus_image"
            :src="baseUrl + item.focus_image"
            class="editor-item"
            :style="{
              'z-index': item.focus_index,
              left: `${item._focus_left}px`,
              top: `${item._focus_top}px`,
            }"
          />
        </div>
      </vue-draggable-resizable>
      <span
        v-for="(item, index) in vLine"
        v-show="item.display"
        :key="index + 'v'"
        class="ref-line v-line"
        :style="{
          left: item.position,
          top: item.origin,
          height: item.lineLength,
        }"
      />
      <span
        v-for="(item, index) in hLine"
        v-show="item.display"
        :key="index + 'h'"
        class="ref-line h-line"
        :style="{
          top: item.position,
          left: item.origin,
          width: item.lineLength,
        }"
      />
    </div>
  </div>
</template>

<script>
  import mixin from '@/views/editor/mixin.js'
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  export default {
    name: 'Playground',
    components: {
      VueDraggableResizable,
    },
    mixins: [mixin],
    data() {
      return {
        vLine: [],
        hLine: [],
        root: {
          data: {
            width: 1280,
            height: 720,
            background: '',
          },
        },
      }
    },
    computed: {
      dom() {
        return this.root.dom
      },
      doms() {
        return this.root.doms
      },
      data() {
        return this.root.data
      },
      baseUrl() {
        return this.root.baseUrl
      },
      pageStyle() {
        const { width, height, background } = this.data
        return {
          width: `${width}px`,
          height: `${height}px`,
          backgroundImage: `url("${this.baseUrl}${background}")`,
        }
      },
    },
    methods: {
      handleDomDbclick() {
        this.root.$refs['image-edit'].showEdit()
        // console.log('dom dblclick')
      },
      onDragstop() {},
      divStyle(row) {
        return {
          'background-image': `url("${row.link_image ? '' : row._link_image}")`,
          'z-index': row.sort,
        }
      },
      // 辅助线回调事件
      getRefLineParams(params) {
        const { vLine, hLine } = params
        this.vLine = vLine
        this.hLine = hLine
      },
      onDrag: function (x, y) {
        if (this.dom) {
          this.$set(this.dom, 'left', x)
          this.$set(this.dom, 'top', y)
        }
      },
    },
  }
</script>

<style scoped>
  .editor-playground {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 1970px;
    height: 1470px;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
        0px 0px / 25px 25px,
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 25px 25px;
  }

  .my-class {
    cursor: move;
    position: absolute;
    border: 1px dashed #fff;
  }

  .editor-div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 0 10px #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .active-dom {
    background: rgba(24, 144, 255, 0.3);
    border: 1px dashed rgb(219, 112, 147);
  }

  .editor-item {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
